<template>
	<div class="winingListDetail" v-if='winingDetail'>
		<x-header title="开奖详情" :left-options="{backText:''}" class='whiteHeader'>
		</x-header>
		<div class="allMess">
			<div class="shopMess">
				<img :src="winingDetail.SERVDETAIL_PHOTO" alt="" />
				<div class="winingMess">
					<h1>{{winingDetail.SERV_DETAIL_NAME}}</h1>
					<p>开奖时间：{{winingDetail.PRIZE_TIME | filterTimesss}}</p>
				</div>
			</div>
			<div class="prizeList">
	    	    <div class="commentHead listHead1"></div>
		    	<div class="allList">
		    		<table>
		    			<thead>
		    				<tr>
		    					<th>幸运儿</th>
		    					<th>订单号</th>
		    					<th>电话</th>
		    				</tr>
		    			</thead>
		    			<tbody>
		    				<tr v-for='item in winingDetail.PRIZE_LIST'>
		    					<td>
		    						<img :src="item.SPATH" alt="" />
		    					</td>
		    					<td>
		    						{{item.ORDER_NO | filterOrderNo}}
		    					</td>
		    					<td>
		    						{{item.PRIZE_USER_PHONE | fiterPhone}}
		    					</td>
		    				</tr>
		    			</tbody>
		    		</table>
		    	</div>
		    </div>
		</div>
	</div>
</template>
<script>
/*往期中奖名单*/
import { XHeader } from 'vux';
import { setCookie, getCookie,reloads,appid,pushStateUrl,iosAdroidWx} from '../../util/commonUtils';
import wx from 'weixin-js-sdk'//微信jssdk
export default {
	name: "winingListDetail",
	// 数据
	data() {

		return {
			userId: '',
			groupGoodsId:'',
			winingDetail:'' //中奖详情
		}
	},
	// 计算属性
	computed: {

	},
	// 创建（实例创建完成）
	created() {
		this.userId = getCookie('loginkey');
		this.groupGoodsId=this.$route.params.id;
		if(sessionStorage.getItem('reload')){
	      sessionStorage.removeItem('reload');
	    }else{
	      sessionStorage.setItem('reload',1);
	      pushStateUrl();
	      reloads();
	      return;
	    }
		this.getwiningListDetail();
		this.getConfig();
	},
	// el被创建，并挂载到实例上
	mounted() {

	},
	// 方法（实例中的方法）-----------
	methods: {
		getwiningListDetail(){
			this.$fetchPost('/Groupon/getHistoryPrizeRecordDetail.action',{GROUPON_GOODS_ID:this.groupGoodsId}).then(res=>{
	          if(res.STATUS_CODE==1){
	            this.winingDetail=res;
	          }
	        },err=>{
	          console.log(err);
	        })
		},
		//获取微信的配置信息
	    getConfig(){
	      let timestamp,nonceStr,signature;
	      let desc='全民火拼，拼团专享优惠，超值一拼到底';
	      let title='拼团狂欢，一拼到底';
	      let imgUrl='http://121.40.78.200/pic/act/cover/20141123_pt_share_icon.jpg';
	      let urls=iosAdroidWx().urls;
	      let appid=iosAdroidWx().appid;
	      this.$fetchPost(urls,{'url' : window.location.href},{emulateJSON:true})
	      .then(res=>{
	        var data = res;
	        console.log(res);
	        // timestamp = data.timestamp;
	        // nonceStr =  data.nonceStr;
	        // signature = data.signature;
	        timestamp=data.NOW_TIME;
	        nonceStr=data.NONCESTR;
	        signature=data.SKEY;
	        // console.log(timestamp,nonceStr,signature,appId)
	        wx.config({
	            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	            appId :appid, // 必填，公众号的唯一标识
	            timestamp : timestamp, // 必填，生成签名的时间戳
	            nonceStr : nonceStr, // 必填，生成签名的随机串
	            signature : signature,// 必填，签名，见附录1
	            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
	        });
	        let that=this;
	        let linkUrl=location.href;
	        wx.ready(function(){
	          // 分享给朋友
	          wx.onMenuShareAppMessage({
	            title: title,
	            desc: desc,
	            link: linkUrl,
	            imgUrl: imgUrl,
	            trigger: function (res) {
	            },
	            success: function (res) {
	            },
	            cancel: function (res) {
	            },
	            fail: function (res) {
	              alert(JSON.stringify(res));
	            }
	          }); 

	          //分享朋友圈
	          wx.onMenuShareTimeline({
	            title: title,
	            desc: desc,
	            link: linkUrl,
	            imgUrl: imgUrl,
	            trigger: function (res) {
	            },
	            success: function (res) {
	            },
	            cancel: function (res) {
	            },
	            fail: function (res) {
	              alert(JSON.stringify(res));
	            }
	          });
	        })
	      },err=>{

	      });
	    }
	},
	// 子组件
	components: {
		XHeader
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.winingListDetail{
	background: #fff;
	height: 100%;
	min-height: 100%;
  .wx{
    width: 0.33rem;
    height: 0.34rem;
  }
  .allMess{
  	.prizeList{
		background: #fff;
		width: 7.5rem;
		padding: 0.36rem 0 0 0;
		margin: 0 auto;
	    border-top: 0.2rem solid #eff4f4;
		.commentHead{
			position: relative;
			z-index: 501;
			width: 6.98rem;
			height: 0.66rem;
			margin:0 auto;
		}
		.listHead1{
			background: url(../../assets/image/groupPurchase/prize1.png) no-repeat;
			background-size: 6.98rem 0.66rem;

		}
		.allList{
			width: 6.5rem;
			min-height: 5rem;
			margin: -0.25rem auto 0;
			border:0.04rem solid #F69F57;
			border-radius: 0.1rem;
			position: relative;
			z-index: 500;
			padding-top: 0.45rem;
			box-shadow: 5px 5px 15px rgba(0,0,0,.03),-5px 5px 15px rgba(0,0,0,.03),5px -5px 15px rgba(0,0,0,.03),-5px -5px 15px rgba(0,0,0,.03);
			table{
				width: 100%;
			}
			td{
				font-size: 0.2rem;
				text-align: center;
				img{
					width: 0.54rem;
					height: 0.54rem;
					border-radius: 50%;
				}
			}
			th{
				font-size: 0.28rem;
				color: #222;
				text-align: center;
			}
		}
	}
  	.shopMess{
  		display: flex;
  		align-items:center;
  		height: 2.2rem;
  		.borderBFu(#DDDDDD);
  		padding: 0 0.2rem;
  		img{
  			width: 1.7rem;
  			height: 1.5rem;
  		}
  		.winingMess{
  			text-align: left;
  			padding-left: 0.2rem;
  			height: 1.5rem;
  			h1{
  				color: #222222;
  				font-size: 0.3rem;
  				display: -webkit-box;
			    -webkit-box-orient: vertical;
			    -webkit-line-clamp: 2;
			    overflow: hidden;
  				width: 5.2rem;
  			}
  			p{
  				font-size: 0.24rem;
  				color: #999;
  				position: absolute;
  				bottom: 0.3rem;
  			}
  		}
  	}
  }
}
</style>